<template>
  <el-card shadow="hover" style="height: 100%;" :body-style="{height:'100%'}">
    <template #header>
    </template>
    <VChart ref="vChartRef" autoresize :option="option"/>
  </el-card>
</template>

<script lang="ts" setup>
import VChart from 'vue-echarts'
//图表组件
import {PieChart,LineChart,BarChart} from 'echarts/charts'
//配置组件
import {LegendComponent, TitleComponent, GridComponent,TooltipComponent} from 'echarts/components'
import {use} from 'echarts/core'
import {CanvasRenderer,SVGRenderer} from 'echarts/renderers'
use([CanvasRenderer,SVGRenderer,BarChart,LineChart, PieChart, GridComponent,TitleComponent, TooltipComponent, LegendComponent])

let dataList = reactive({
  seriesData:[10,40,50,60,70,0]
})
const vChartRef = ref(null)

onMounted(() => {
  console.log(vChartRef.value);
})

const option = {
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {

  },
  yAxis: {
    type:'category',
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  series: [
    {
      name: '销量',
      type: 'bar',
      data:dataList.seriesData
    }
  ]
}

setInterval(() => {
  dataList.seriesData.length = 0
  dataList.seriesData.push(Math.random() * 100,Math.random() * 100,Math.random() * 100,Math.random() * 100,Math.random() * 100,Math.random() * 100)
},2000)
</script>

<style scoped>

</style>
